<template>
	<view class="page">
		<view class="page-banner">
			<image mode="scaleToFill" style="width: 100%;height: 100%" src="https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/xze/5.png"></image>
		</view>
		<view class="main">
			<view class="main-top">
				<view class="main-top-item" @click="gofriend">
					<view class="main-top-item-number"><text style="color: #FF7906">{{inviteNum}}</text>></view>
					<view class="main-top-item-people">邀请好友(人)</view>
				</view>
				<view class="main-top-item" @click="gobill">
					<view class="main-top-item-number"><text style="color: #FF7906">{{cash}}</text>></view>
					<view class="main-top-item-people">佣金详细</view>
				</view>
				<view class="main-top-item" @click="goearnings">
					<view class="main-top-item-number"><text style="color: #FF7906">{{totalCash}}</text>></view>
					<view class="main-top-item-people">累计收益(元)</view>
				</view>
			</view>
			<view class="main-button">
				<view class="main-button-text">可提现金额：{{cash}}元</view>
				<view class="main-button-button" @click="invite">提现</view>
			</view>
		</view>
		<view class="user">
			<swiper class="swiper" circular autoplay interval="1500" duration="500" vertical='true'>
				<swiper-item v-for="(item,index) in successfulUser" :key="index">
					<view class='user_box'>
						<view class="user-photo">
							<image mode="scaleToFill" style="width: 100%;height: 100%;border-radius: 50%;"
								:src="item.image">
							</image>
						</view>
						<view class="user-info">
							<view class="user-info-name">{{item.name}}</view>
							<view class="user-info-explain">{{item.content}}</view>
						</view>
						<view class="user-time">{{item.time}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">赚钱攻略</view>
		<view class="mark-money">
			<image mode="scaleToFill" style="width: 100%;height: 100%"
				src="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/aizhuanqian3.png"></image>
		</view>
		<view class="mark-method" @click="open">赚钱攻略 ></view>
		<view class="button-bot" @click="invitation">
			立即邀请
		</view>
		<view class="placeholder"></view>
		<view class="page-shadow" v-if="show">
			<view class="popup">
				<view class="popup-title">
					<view class="popup-x" @click="close">
						<image mode="scaleToFill" style="width: 100%;height: 100%" src="../../static/markMoney/gb.png">
						</image>
					</view>
					<text>赚钱攻略</text>
				</view>
				<view class="popup-context">
					<view class="popup-context-title">1、如何提现?</view>
					<view class="popup-context-info">可在“用户中心->联系客服”联系客服提现。 </view>
					<view class="popup-context-placeholder"></view>
					<view class="popup-context-title">2、为什么我邀请的人充值后，我没有佣金？</view>
					<view class="popup-context-info">(1)被邀请人需要是没有使用过本产品的新用户。 </view>
					<view class="popup-context-info">(2)被邀请人已经被其他用户邀请过了，不是你邀请的新用户。</view>
					<view class="popup-context-placeholder"></view>
					<view class="popup-context-title">3、怎样才能赚更多的佣金？</view>
					<view class="popup-context-info">尽早邀请新用户锁定下级（即我的下下级），后续下下级用户所有消费都有5%的佣金。</view>
				</view>
				<view class="popup-button" @click="close">确定</view>
			</view>
		</view>
		<view class="dialog-shadow" v-if="shareShow" @click="closeInvitation">
			<view class="dialog-shadow-bottom">
				<button plain="true" open-type="share" style="border:none" class="dialog-shadow-bottom-item">
					<view class="dialog-shadow-bottom-item-img">
						<image mode="scaleToFill" style="width: 100%;height: 100%" src="../../static/markMoney/wx.png">
						</image>
					</view>
					<view class="dialog-shadow-bottom-item-text">微信好友/群</view>
				</button>
				<view class="dialog-shadow-bottom-item" @click="posters" v-if="authorizationBtn">
					<view class="dialog-shadow-bottom-item-img">
						<image mode="scaleToFill" style="width: 100%;height: 100%" src="../../static/markMoney/tp.png">
						</image>
					</view>
					<view class="dialog-shadow-bottom-item-text">分享海报</view>
				</view>
				<button class="dialog-shadow-bottom-item" style="border:none" :plain="true" open-type="openSetting"
					@opensetting="opensetting" v-else>
					<view class="dialog-shadow-bottom-item-img">
						<image mode="scaleToFill" style="width: 100%;height: 100%" src="../../static/markMoney/tp.png">
						</image>
					</view>
					<view class="dialog-shadow-bottom-item-text">分享海报</view>
				</button>
				<view class="dialog-shadow-bottom-item" @click="shareLinks">
					<view class="dialog-shadow-bottom-item-img">
						<image mode="scaleToFill" style="width: 100%;height: 100%" src="../../static/markMoney/lj.png">
						</image>
					</view>
					<view class="dialog-shadow-bottom-item-text">分享链接</view>
				</view>
			</view>
		</view>
		<view v-if="showCanvas" class="canvasView" :style="{'z-index':showCanvas?'300':'0'}">
			<canvas :style="{'width':canvasWidth+'px', 'height':canvasHeight+'px'}" canvas-id="myCanvas" />
		</view>
	</view>
</template>
<script>
	import {
		myShowLoading,
		myHideLoading,
	} from "../../utils/showToast.js";
	import {
		apiMixUrlKeyApi
	} from "../../api/assemb";
	import store from '../../store/idnex.js'
	export default {
		data() {
			return {
				show: false,
				shareShow: false,
				showCanvas: false,
				authorizationBtn: true,
				userid: '',
				cash: 0,
				totalCash: 0,
				alreadyCash: 0,
				inviteNum: 0,
				canvasHeight: 500,
				canvasWidth: 300,
				successfulUser: [
					{
						name: '用户***',
						content: '成功提取佣金800元,已到账',
						time: '',
						image:'../../static/markMoney/user.png'
					},
					{
						name: '用户***',
						content: '成功提取佣金400元,已到账',
						time: '',
						image:'../../static/markMoney/1.jpg'
					},
					{
						name: '用户***',
						content: '成功提取佣金600元,已到账',
						time: '',
						image:'../../static/markMoney/2.jpg'
					},
					{
						name: '用户***',
						content: '成功提取佣金200元,已到账',
						time: '',
						image:'../../static/markMoney/3.jpg'
					},
					{
						name: '用户***',
						content: '成功提取佣金1000元,已到账',
						time: '',
						image:'../../static/markMoney/4.jpg'
					},
					{
						name: '用户***',
						content: '成功提取佣金900元,已到账',
						time: '',
						image:'../../static/markMoney/5.jpg'
					},

				]
			}
		},
		onShareAppMessage(res) {
			const that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target, 'res.target')
			}
			return {
				title: 'AI写作神器，一键改写变原创。',
				path: "pages/home/home?userid=" + that.userid,
				imageUrl: "https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/xze/6.png",
				success: function(res) {
					console.log(
						"--------------转发成功--------------------",
						res,
						that.userid
					);
				}
			}
		},
		onLoad() {
			var time = new Date()
			let baseinfo = uni.getStorageSync('baseinfo');
			console.log('baseinfo', baseinfo)
			this.userid = baseinfo.userid
			this.successfulUser.forEach((item) => {
				item.time = time.toLocaleDateString()
			})
		},
		onShow() {
			this.loadpeople()
		},
		methods: {
			opensetting(e) {
				console.log('opensettinge', e)
				if (!e.detail.authSetting["scope.writePhotosAlbum"]) {
					uni.showModal({
						title: '提示',
						content: '你必须授权《添加到相册》权限才能使用',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.posters()
				}

			},
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			invitation() {
				this.shareShow = true
			},
			closeInvitation() {
				this.shareShow = false
			},

			gofriend() {
				uni.navigateTo({
					url: '/pages_markMoney/promotion4/promotion4'
				});

			},
			gobill() {
				uni.navigateTo({
					url: '/pages_markMoney/promotion3/promotion3'
				});

			},
			goearnings() {
				let that = this
				console.log('this.cash', this.cash)
				uni.navigateTo({
					url: '/pages_markMoney/promotion2/promotion2' +
						`?cash=${that.cash}&totalCash=${that.totalCash}&alreadyCash=${that.alreadyCash}&inviteNum=${that.inviteNum}`
				});
			},
			loadpeople() {
				var baseinfo = uni.getStorageSync("baseinfo");
				let timestamp = Date.parse(new Date()) / 1000;
				baseinfo.timestamp = timestamp;
				var prams = {
					base: baseinfo
				};
				apiMixUrlKeyApi(prams, '1053', 'GetInviteInfo').then(res => {
					console.log('res===>', res)
					this.cash = res.data.cash
					this.totalCash = res.data.totalCash
					this.alreadyCash = res.data.totalCash - res.data.cash
					this.inviteNum = res.data.inviteNum
				})
			},
			async posters() {
				var that = this;
				myShowLoading("正在生成海报");
				let c1 = new wx.cloud.Cloud({
					// 资源方 AppID
					resourceAppid: getApp().globalData.resourceAppid,
					// 资源方环境 ID
					resourceEnv: getApp().globalData.resourceEnv,
				});
				await c1.init();
				c1.callFunction({
					name: "getUnlimited",
					data: {
						idForPosters: this.userid,
					},
				}).then((res) => {
					const fs = wx.getFileSystemManager();
					const filePath = wx.env.USER_DATA_PATH + "/myercode.png";
					console.log('filePath==>', filePath)
					fs.writeFile({
						// 写文件
						filePath: filePath,
						data: res.result.buffer,
						encoding: "binary", //二进制流文件必须是 binary
						success(res) {
							that.drawImage(filePath);
						},
					});
				});
			},
			shareLinks() {
				var that = this;
				let userid = that.userid
				wx.showModal({
					title: "温馨提示",
					content: "成功获取您的专属推广链接，复制链接分享好友",
					showCancel: false,
					confirmText: "复制",
					success(ser) {
						wx.setClipboardData({
							data: "一键AI文案改写，百万大V们都在用，点击免费体验伪原创生成器: https://mp3.peiyintek.cn/wxlink3.html?userid=" +
								userid + "&type=" + store.state.appid,
							success() {
								wx.showToast({
									title: "复制成功",
									icon: "success",
									duration: 1200,
								});
							},
						});
					},
				});
			},
			drawImage(filePath) {
				var that = this;
				const ctx = wx.createCanvasContext("myCanvas", that);
				// 获取图片信息，要按照原图来绘制，否则图片会变形
				wx.getImageInfo({
					src: "https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1683612581221.jpg",
					success: function(res) {
						// 根据 图片的大小 绘制底图 的大小
						console.log(" 绘制底图 的图片信息》》》", res);
						let imgW = res.width / 4.5;
						let imgH = res.height / 4.5;
						let imgPath = res.path;
						that.showCanvas = true
						that.canvasHeight = imgH
						that.canvasWidth = imgW
						// 绘制底图 用原图的宽高比绘制
						ctx.drawImage(imgPath, 0, 0, imgW, imgH);
						wx.getImageInfo({
							src: filePath, // 二维码图片的路径
							success: function(res) {
								console.log(" 绘制二维码》》》", res);
								// 绘制二维码
								ctx.drawImage(res.path, (imgW / 2 - 115), (imgH - 135), 100, 100);
								ctx.draw();
								setTimeout(() => {
									wx.canvasToTempFilePath({
											canvasId: "myCanvas",
											success: function(res) {
												console.log(
													"合成的带有小程序码的图片success》》》",
													res);
												let tempFilePath = res
													.tempFilePath;
												//保存到相册
												wx.saveImageToPhotosAlbum({
													filePath: tempFilePath,
													success(res) {
														myHideLoading();
														wx.showModal({
															title: "温馨提示",
															content: "海报保存成功，可在相册中查看并分享",
															showCancel: false,
															success(
																res
															) {
																that.showCanvas =
																	false
																wx
																	.clear;
															},
														});
													},

													fail(res) {
														myHideLoading();
														wx.showModal({
															title: "温馨提示",
															content: "图片保存失败，请重试，并授权添加到相册功能",
															showCancel: false,
														});
														that.showCanvas =
															false
														that.authorizationBtn =
															false
													},
												});
												console.log("合成的带有小程序码的图片的信息》》》",
													res);
											},
											fail: function(res) {
												console.log(
													"生成的图拍呢 失败 fail fail fail ",
													res);
												myHideLoading();
												wx.showModal({
													title: "温馨提示",
													content: "小程序码图片合成失败，请重试",
													showCancel: false,
												});
											},
										},
										that
									);
								}, 1500);
							},
						});
					},
					fail(res) {
						myHideLoading();
						wx.showModal({
							title: "温馨提示",
							content: "图片信息获取失败，请重试",
							showCancel: false,
						});
					},
				});
			},
			invite() {
				let content = "暂无佣金可提现，快去分享赚佣金吧";
				if (this.cash > 0 && this.cash < 200) {
					content = "满200才能提现，继续分享赚佣金吧";
				} else if (this.cash >= 200) {
					content = "可在“用户中心->联系客服”联系客服提现";
				}
				wx.showModal({
					content: content,
					showCancel: !1,
					confirmText: "明白",
					success: function(t) {},
				});
			}
		}
	}
</script>
<style lang="scss">
	.page {
		width: 100%;
		height: 100vh;
	}

	.page-banner {
		width: 100%;
		height: 300rpx;
	}

	.main {
		position: absolute;
		width: 90%;
		height: 290rpx;
		background-color: #fff;
		top: 215rpx;
		left: 50%;
		border-radius: 10rpx;
		transform: translateX(-50%);
		box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, .1);

		.main-top {
			width: 90%;
			margin: 0px auto;
			display: flex;
			padding-top: 30rpx;

			.main-top-item {
				width: 33%;
				height: 120rpx;

				.main-top-item-number {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.main-top-item-people {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}

		.main-button {
			width: 80%;
			height: 90rpx;
			background-color: #5490FF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px auto 0rpx;
			border-radius: 6rpx;
			color: #fff;
			padding: 0rpx 30rpx;
			font-size: 24rpx;

			.main-button-button {
				width: 80rpx;
				padding: 10rpx 10rpx;
				background-color: #fff;
				color: #333333;
				border-radius: 20rpx;
				text-align: center;
			}
		}
	}

	.user {
		width: 90%;
		height: 120rpx;
		margin: 225rpx auto 0rpx;
		background-color: #F6F6F6;
		box-sizing: border-box;

		.swiper {
			width: 100%;
			height: 100%;

			.user_box {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.user-info {
					width: calc(100% - 300rpx);
					height: 80rpx;

					.user-info-name {
						width: 100%;
						height: 50%;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.user-info-explain {
						width: 100%;
						height: 50%;
						color: #6F6F6F;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
					}
				}
			}


		}

		.user-time {
			width: 160rpx;
			height: 80rpx;
			color: #666666;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
		}
	}

	.title {
		height: 100rpx;
		color: #333;
		font-size: 36rpx;
		margin-top: 30rpx;
		margin-left: 35rpx;
	}

	.mark-money {
		width: 80%;
		height: 380rpx;
		margin: 0px auto;
	}

	.mark-method {
		color: #999999;
		text-align: center;
		font-size: 24rpx;
		margin: 15rpx 0rpx;
	}

	.button-bot {
		width: 90%;
		height: 100rpx;
		background-color: #5490FF;
		border-radius: 6rpx;
		margin: 10px auto 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.placeholder {
		width: 100%;
		height: 30rpx;
	}

	.page-shadow {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0rpx;
		z-index: 10;
	}

	.popup {
		width: 80%;
		background-color: #fff;
		border-radius: 30rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.popup-title {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 30rpx;
			position: relative;

			.popup-x {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				right: 50rpx;
			}
		}

		.popup-x {}

		.popup-context {
			padding: 00rpx 30rpx;

			.popup-context-title {
				font-size: 24rpx;
				color: #333;
				line-height: 40rpx;
			}

			.popup-context-info {
				font-size: 24rpx;
				color: #999999;
				line-height: 40rpx;
			}

			.popup-context-placeholder {
				width: 100%;
				height: 20rpx;
			}
		}

		.popup-button {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 30rpx;
		}
	}

	.dialog-shadow {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0rpx;
		z-index: 20;

		.dialog-shadow-bottom {
			width: 100%;
			height: 200rpx;
			position: absolute;
			bottom: 0rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;

			.dialog-shadow-bottom-item {
				width: 33%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.dialog-shadow-bottom-item-img {
					width: 80rpx;
					height: 80rpx;
				}

				.dialog-shadow-bottom-item-text {
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.canvasView {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>